<template>
	<view class="baseView">
		<!-- <view class="status_bar"></view> -->
		<!-- <view class="top_view">
			<text style="color: #FFFFFF; width: 100%; text-align: center; font-size: 34rpx;">商品分类</text>
		</view> -->

		<uv-navbar leftText="" :titleStyle="{color: '#ffffff'}" bgColor="linear-gradient(to right, rgb(31, 160, 120), rgb(57, 209, 160))" :fixed="true" title="商品分类" :safeAreaInsetTop="true">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<!-- <uv-icon name="arrow-left" size="19"></uv-icon>
									<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
									<uv-icon name="home" size="20"></uv-icon> -->
				</view>
			</template>
		</uv-navbar>



		<view class="productSort">
			<div class="index">
				<view class="header acea-row row-center-wrapper">
					<view @click="goGoodSearch()" class="search acea-row row-middle positionstyle">
						<text class="iconfont icon-xiazai5"></text>搜索商品
					</view>
				</view>
			</div>
			<view class="aside positionstyle">
				<view class="item acea-row row-center-wrapper" :class="categoryDivindex === navActive ? 'on' : ''"
					v-for="(item, categoryDivindex) in category" :key="categoryDivindex"
					@click="asideTap(categoryDivindex)">
					<text>{{ item.cateName }}</text>
				</view>
			</view>
			<view class="conter" style="width: 100%; margin-left: 0rpx; padding-top: 0rpx;">
				<view v-for="(item, eq) in category" :key="eq">
					<view class="listw" v-if="eq === navActive">
						<view class="title acea-row row-center-wrapper" ref="title">
							<view class="line"></view>
							<view class="name">{{ item.cateName }}</view>
							<view class="line"></view>
						</view>
						<view class="list acea-row" style="padding-top: 0rpx;">
							<view class="item acea-row row-column row-middle"
								v-for="(child, categoryIndex) in item.children" :key="categoryIndex"
								@click="goGoodsList(child)">
								<view class="picture">
									<image :src="child.pic" />
								</view>
								<view class="name line1">{{ child.cateName }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:100rpx;"></view>
		</view>
	</view>
</template>
<script>
	import {
		getCategory
	} from "@/api/store";
	import {
		trim
	} from "@/utils";

	export default {
		name: "GoodsClass",
		components: {},
		props: {},
		data: function() {
			return {
				category: [],
				navActive: 0,
				search: "",
				lock: false
			};
		},
		watch: {
			"$yroute.query.id": function(n) {
				if (n) {
					this.activeCateId(n);
				}
			}
		},
		mounted: function() {
			this.loadCategoryData();
		},
		methods: {
			goGoodSearch() {
				this.$yrouter.push("/pages/shop/GoodSearch/index");
			},
			goGoodsList(child) {
				this.$yrouter.push({
					path: "/pages/shop/GoodsList/index",
					query: {
						id: child.id,
						title: child.cateName
					}
				});
			},
			activeCateId(n) {
				let index = 0;
				n = parseInt(n);
				if (!n) return;
				this.category.forEach((cate, i) => {
					if (cate.id === n) index = i;
				});
				if (index !== this.navActive) {
					this.asideTap(index);
				}
			},
			loadCategoryData() {
				getCategory().then(res => {
					this.category = res.data;
					this.$nextTick(() => {
						if (this.$yroute.query.id) {
							this.activeCateId(this.$yroute.query.id);
						}
					});
				});
			},
			submitForm: function() {
				var val = trim(this.search);
				if (val) {
					this.$yrouter.push({
						path: "/pages/shop/GoodsList/index",
						query: {
							s: val
						}
					});
					setTimeout(() => (this.search = ""), 500);
				}
			},
			asideTap(index) {
				this.navActive = index;
			}
		}
	}
</script>

<style>
	.baseView {
		/* display: flex; */
		/* flex-direction: column; */
		height: 100%;
	}

	.productSort {
		height: 100%;
		position: relative;
		
		top: calc(var(--status-bar-height) + 44px + 20px);
		display: flex;
		flex-direction: row;
	}

	.navView {
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100rpx;
		background-image: linear-gradient(to right, rgb(31, 160, 120), rgb(57, 209, 160));
	}

	.status_bar {
		position: fixed;
		height: var(--status-bar-height);
		width: 100%;
		z-index: 999;
		/* background-color: #F8F8F8;  */
		background-image: linear-gradient(to right, rgb(31, 160, 120), rgb(57, 209, 160));
	}

	.top_view {
		height: 88rpx;
		width: 100%;
		position: fixed;
		/* background-color: #F8F8F8;  */
		top: var(--status-bar-height);
		z-index: 999;
		background-image: linear-gradient(to right, rgb(31, 160, 120), rgb(57, 209, 160));
		display: flex;
		align-items: center;
	}

	.positionstyle {
		position: unset !important;
	}
</style>